<!--
*@Author: QWP
*@Description: 选择人员的下拉树
*@Date: 2024-09-10 09:13:29
-->
<template>
  <a-tree-select 
    :treeData="treeData"
    v-bind="filterProps($attrs)"
    @click="treeClick">
  </a-tree-select>

  <!-- 选中人员弹窗 -->
  <u-sel-user v-model:open="showSelUser"
    v-bind="$attrs"
    :selData="$attrs['value']"
    :multiple="$attrs['multiple']"
    @submit="selSubmit">
  </u-sel-user>
  
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, useAttrs, watch, isRef } from 'vue' 
import { useBaseStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { evectionUserTree } from '@/service/administration/travel'
import { cloneDeep } from 'lodash'
defineOptions({
  name: 'u-seluser-tree'
})

const attrs = useAttrs()
const { deptUsers } = storeToRefs(useBaseStore())

let showSelUser = ref<boolean>(false)

const emits = defineEmits(['submit', 'change', 'update:value'])

// 获取部门人员数据
const treeData = computed(() => {
  let tExData = attrs['extraData'] || []
  return [ ...(isRef(tExData) ? tExData.value : tExData) , ...(attrs['isLoadData'] == false ? [] : deptUsers.value)]
})

// 下拉树点击
const treeClick = () => {
  
  setTimeout(() => {
    if(showSelUser.value == true) return
    showSelUser.value = true
  }, 500);
}

// 选中人员保存回调
const selSubmit = (data) =>  {
  let keyids = data.map(i => i.keyid)
  emits('update:value', attrs['multiple'] == false ? keyids.join('') : keyids)
  emits('change', attrs['multiple'] == false ? keyids.join('') : keyids, data)
  showSelUser.value = false;
}

// 过滤掉重复的绑定元素
const filterProps = (attrs1) => {
  let tAttrs = cloneDeep(attrs)
  delete tAttrs['onClick']
  return tAttrs
}
</script>

<style lang='scss' scoped>
</style>